<template>
  <div class="login-container">
    <el-card style="width: 500px">  <!-- 将宽度从400px增加到500px -->
      <div class="card-header">
        <h1>智序系统</h1>
      </div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" :rules="rules" ref="loginForm">
            <el-form-item prop="username">
              <el-input 
                v-model="loginForm.username" 
                placeholder="用户名"
                @input="$refs.loginForm.validateField('username')"
                @change="$refs.loginForm.clearValidate('username')"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="loginForm.password" 
                type="password" 
                placeholder="密码"
                @input="$refs.loginForm.validateField('password')"
                @change="$refs.loginForm.clearValidate('password')"/>
            </el-form-item>
            <el-button 
              type="primary" 
              @click="handleLogin"
              style="width: 100%">
              登录
            </el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <el-form :model="registerForm" :rules="registerRules" ref="registerForm">
            <el-form-item prop="username">
              <el-input 
                v-model="registerForm.username" 
                placeholder="用户名"
                @input="$refs.registerForm.validateField('username')"
                @change="$refs.registerForm.clearValidate('username')"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input 
                v-model="registerForm.password" 
                type="password" 
                placeholder="密码"
                @input="$refs.registerForm.validateField('password')"
                @change="$refs.registerForm.clearValidate('password')"/>
            </el-form-item>
            <el-button 
              type="success" 
              @click="handleRegister"
              style="width: 100%">
              注册
            </el-button>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
// 添加必要的导入
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import axios from 'axios'  // 添加这行导入
import { useRouter } from 'vue-router'

const router = useRouter()

// 修复响应式对象定义
const activeTab = ref('login')

// 修复表单数据定义
const loginForm = ref({
  username: '',
  password: ''
})

const registerForm = ref({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 16, message: '用户名长度应在3到16个字符之间', trigger: 'input' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应在6到20个字符之间', trigger: 'input' }
  ]
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 16, message: '用户名长度应在3到16个字符之间', trigger: 'input' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应在6到20个字符之间', trigger: 'input' },
    { pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, message: '密码必须包含字母和数字', trigger: 'input' }
  ]
}

const handleLogin = async () => {
  try {
    const response = await axios.post('http://117.72.45.141:8091/api/user/login', {
      username: loginForm.value.username,
      password: loginForm.value.password
    })
    
    if (response.data.code === 200) {
      ElMessage.success('登录成功')
      // 添加token存储逻辑
      localStorage.setItem('token', response.data.data.token)
      // 确保路由跳转
      await router.push('/main')
    } else {
      ElMessage.error(response.data.message || '登录失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '登录失败')
  }
}

const handleRegister = async () => {
  try {
    const response = await axios.post('http://117.72.45.141:8091/api/user/register', 
      {
        username: registerForm.value.username,
        password: registerForm.value.password
      },
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    )
    
    if (response.data.code === 200) {
      ElMessage.success('注册成功')
      activeTab.value = 'login'
    } else {
      ElMessage.error(response.data.message || '注册失败')
    }
  } catch (error) {
    if (error.response?.status === 409) {
      ElMessage.error('用户名已被使用，请尝试其他用户名')
    } else {
      ElMessage.error(error.response?.data?.message || error.message || '注册失败，请检查网络连接')
    }
  }
}

// 删除handleInput方法，不再需要
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(-45deg, #b62748, #b62748, #e8a485, #d5d523, #23d523, #27b6b4, #23a6d5, #a023d5, #a023d5);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.el-card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: none;
  overflow: hidden;
}

.el-tabs__item {
  font-weight: 500;
  color: #333;
}

.el-button {
  border-radius: 20px;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 修改验证提示样式为灰色 */
:deep(.el-form-item__error) {
  color: #909399 !important;
  font-size: 12px;
  padding-top: 4px;
}

/* 完全移除输入框错误状态时的样式变化 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  --el-input-border-color: var(--el-border-color) !important;
  --el-input-hover-border-color: var(--el-border-color) !important;
  box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
}
:deep(.el-form-item.is-error .el-input__inner) {
  box-shadow: none !important;
  border-color: var(--el-border-color) !important;
}

:deep(.el-form-item.is-required .el-form-item__label:before) {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.card-header {
  text-align: center;
  margin-bottom: 20px;
}

.card-header h1 {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(to right, #92bee5, #1e78c6, #0d5092);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientText 3s ease infinite;
  background-size: 200% auto;
}

@keyframes gradientText {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* 调整表单容器样式 */
.el-form {
  width: 400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 统一输入框和按钮宽度 */
.el-input,
.el-button {
  width: 100%;
}

/* 调整按钮样式 */
.el-button {
  margin-top: 20px;
  height: 40px;
}

/* 保持原有卡片样式 */
.el-card {
  width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}


@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.el-card {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: none;
  overflow: hidden;
}

.el-tabs__item {
  font-weight: 500;
  color: #333;
}

.el-button {
  border-radius: 20px;
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 修改验证提示样式为灰色 */
:deep(.el-form-item__error) {
  color: #909399 !important;
  font-size: 12px;
  padding-top: 4px;
}

/* 完全移除输入框错误状态时的样式变化 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  --el-input-border-color: var(--el-border-color) !important;
  --el-input-hover-border-color: var(--el-border-color) !important;
  box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
}
:deep(.el-form-item.is-error .el-input__inner) {
  box-shadow: none !important;
  border-color: var(--el-border-color) !important;
}

:deep(.el-form-item.is-required .el-form-item__label:before) {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

</style>

